import React from 'react';
import TRNotification from '#/utils/notification';
import { Modal, Button, Tree } from 'antd';
import { CloseOutlined } from '#/utils/antdIcons';
import TBasePage from '#/base/TBasePage';
import styles from './index.less';
import plan_icon from '@/assets/img/plan_icon.png';
const { TreeNode } = Tree;

class MyModalComponent extends TBasePage {
  static defaultProps = {
    data: [],
    expandData: [],
    stationData: [],
  };
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      checkAll: false,
      treeData: [],
      selectedKeys: [],
      selectIds: [], // 请求参数
      selectType: '', // 请求参数，取label字段
      selectName: '',
    };
  }

  componentDidMount() {
    this.setState({
      visible: true,
      treeData: [{ deptNum: '-1', deptName: '全部', label: '全部', children: this.props.data }], // 全部 => 中心 => 区域 => 场站 => 项目
    });
  }

  _onCancel = () => {
    const { onPress } = this.props;
    this.setState({ visible: false }, () => {
      onPress({ index: 0 });
    });
  };

  _onOk = () => {
    const { selectedKeys, selectIds, selectType, selectName } = this.state;
    if (selectedKeys.length === 0) return;

    const { onPress } = this.props;
    this.setState({ visible: false }, () => {
      onPress({ index: 1, selectIds, selectType, selectName });
    });
  };

  _onChangeAll = (checkAll) => {
    // 全选
    this.setState({ checkAll: !checkAll });
  };

  _onRenderTreeNodes(data = []) {
    return data.map((item) => {
      const title = item.deptName || item.fullName;
      if (item.children) {
        return (
          <TreeNode title={title} key={item.deptNum} dataRef={item}>
            {this._onRenderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={title} key={item.deptNum} dataRef={item} />;
    });
  }

  _onSelectTreeNode(selectedKeys, e) {
    // 单选全部，取所有中心 area、单选中心/区域取 area
    // 单选场站，取场站下所有项目 deptName、单选项目取 deptName
    let selectIds = [];
    let selectType = '';
    let selectName = '';
    const d = e.node.dataRef;
    const { area = '', deptName = '', label = '', children = [] } = d;
    if (label === '全部') {
      selectIds = children.map((x) => x.area);
      selectType = '中心';
      selectName = `中心：全部`;
    } else if (label === '中心' || label === '区域') {
      selectIds = [area];
      selectType = label;
      selectName = `${label}：${area}`;
    } else if (label === '场站') {
      selectIds = children.map((x) => x.deptName);
      selectType = '项目';
      selectName = `场站：${deptName}`;
    } else if (label === '项目') {
      selectIds = [deptName];
      selectType = '项目';
      selectName = `项目：${deptName}`;
    } else if (label === '') {
      selectIds = [d.fullName];
      selectType = '区域';
      selectName = `区域：${d.fullName}`;
    }
    this.setState({
      selectedKeys,
      selectIds,
      selectType,
      selectName,
    });
  }

  render() {
    const { treeData, visible, selectedKeys } = this.state;
    return (
      <Modal
        centered
        width={540}
        className="modalWraps"
        closable={false}
        maskClosable={false}
        visible={visible}
        footer={[
          <Button key="op1" onClick={this._onCancel.bind(this)}>
            取消
          </Button>,
          <Button
            key="op2"
            disabled={selectedKeys.length === 0}
            onClick={this._onOk.bind(this)}
            type="primary"
          >
            提交
          </Button>,
        ]}
        onCancel={this._onCancel.bind(this)}
      >
        <div className={styles.rmodal}>
          <div className={styles.popheader}>
            <div className={styles.popheader_title}>
              <img src={plan_icon} alt="" />
              <span className={styles.popheader_title_name}>中心</span>
            </div>
            <span className="clons">
              <CloseOutlined
                className={styles.close}
                style={{ fontSize: '18px' }}
                onClick={this._onCancel.bind(this)}
              />
            </span>
          </div>
          <div className={styles.card}>
            <div className={styles.container}>
              <div className={styles.treebox}>
                <Tree
                  ref={(node) => (this.tree = node)}
                  className="trees"
                  blockNode={true}
                  defaultExpandedKeys={['-1']}
                  onSelect={this._onSelectTreeNode.bind(this)}
                >
                  {this._onRenderTreeNodes(treeData)}
                </Tree>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}

class MyModal {
  __key__ = '';
  show = (data = []) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <MyModalComponent
            data={data}
            onPress={(res) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(res);
            }}
          />
        ),
        duration: null,
      });
    });
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new MyModal();
